<template>
  <div class="hello">
    当前文件路径：<el-input style="width:400px;" v-model="currentPath" disabled></el-input>
    <div class="formData" >
      <button @click="getback">返回</button>
      <el-input style="width:200px" v-model="fileInfos.filename" placeholder="请输入文件名"></el-input>
      <!-- <input type="text"> -->
       <el-select style="width:100px" v-model="fileInfos.suffix" placeholder="请选择文件后缀">
        <el-option
          v-for="item in options"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
      <button @click="getFiles">提交</button>
    </div>
    <div class="play">
        <div 
          class="play-item"
          @click="intoFile(item)"
          v-for="(item,index) in fielsList" 
          :key="index" >
          {{item}}
        </div>
    </div>
    <!-- 对话框 -->
    <el-dialog
      :title="currentFile.filename"
      :visible.sync="dialogVisible"
      width="50%">
      <!-- <div v-if="fileInfos.suffix === 'txt'">

      </div>
      <div v-else-if="currentFile.suffix === 'jpg' || currentFile.suffix === 'jpeg' || currentFile.suffix === 'png'">
        <img src="file///D://桌面/热成像导出图像/20220705-097813-轴承温度-9.jpg" :alt="currentFile.filename">
        <img src="@/assets/20220705-097813-轴承温度-5.jpg" :alt="currentFile.filename">
      </div>
      <pre>

      </pre> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-image
      style="width: 100px; height: 100px"
      src="@/assets/20220705-097813-轴承温度-5.jpg"
      ></el-image>
  </div>
</template>

<script>
import axios from "axios"
axios.defaults.baseURL = 'http://localhost:8081';
export default {
  props: {
    
  },
  data() {
    return {
      fielsList:[],
      fileInfos:{
        suffix:"",
        filename:""
      },
      options:['.js','.html','.txt','jpg','mp4','ini','BIN'],
      a:1,
      currentPath:"",//当前路径信息
      dialogVisible:false,//对话框的显示与隐藏
      // 图片判断条件
      // condition:this.fileInfos.suffix === 'jpg' || 
      // this.fileInfos.suffix === 'jpeg' || this.fileInfos.suffix === 'png',
      currentFile:{
        openFile:"",//打开文件地址
        filename:"",//当前打开文件名
        suffix:""
      },
      publicPath: process.env.BASE_URL,
    }
  },
  async created(){
    // const list = await axios.get("/getFiles?currentPath='/'")
    // // console.log(a.data.files)
    // this.fielsList = list.data.list;
    this.getFiles()
  },
  methods:{
    // 获取文件信息
    async getFiles(){
      const list2 = await axios.get("/getFiles/anyFiles?" + `filename=${this.fileInfos.filename}&suffix=${this.fileInfos.suffix}&currentPath=${this.currentPath}`)
      // 保存当前路径信息
      if(list2.data.filePath === "/") {
        this.currentPath = ""
      }else {
        this.currentPath = list2.data.filePath
      }
      // 保存文件列表
      this.fielsList = list2.data.list
    },
    // 点击进入文件
    async intoFile(filename) {
      if(filename.indexOf(".") !== -1){
        console.log(this.currentPath + "/" + filename)
        // this.dialogVisible = true
        // 保存当前文件名,文件后缀，地址
        this.currentFile.filename = filename
        this.currentFile.openFile = this.currentPath + "/" + filename//地址
        this.currentFile.suffix = filename.split(".")[1]
        // 
        const list = await axios.get("/getFiles?" + `currentPath=${this.currentFile.openFile}`)
        console.log(list)
        // 直接跳转页面
        // location.href = "file:///" + this.currentFile.openFile
        // window.open("file:///" + this.currentFile.openFile)
        // const reader = new FileReader()
        // reader.readAsDataURL("file:///" + this.currentFile.openFile)
        return
      }
      this.fileInfos.filename = filename.split(".")[0]
      if(!filename.split(".")[1]) {
        this.fileInfos.suffix = ""
      }else {
        this.fileInfos.suffix = filename.split(".")[1]
      }
      this.getFiles();
    },
    // 返回上一级目录
    async getback(){
      // 最后一个 / 的位置
      // console.log('asd'.substr(0,0))
      const index = this.currentPath.lastIndexOf("/")
      let filePath = ""
      if(index !== 0) {
        filePath = this.currentPath.substr(0,index)
      }else {
        filePath = ""
      }
      const list = await axios.get("/getFiles?" + `currentPath=${filePath}`)
      this.currentPath = list.data.filePath
      this.fielsList = list.data.list
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.formData {
  display: flex;
  justify-content: center;
  margin: 10px;
}
.play {
  width: 300px;
  height: 300px;
  margin: 10px auto;
  border: 1px solid red;
  overflow: scroll;
  
}

.play-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px;

}
</style>
